<template>
  <div>
    <search @add="handleOpenDialog" @search="handleSearchByKeyword"/>
    <div>
      <ms-table
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        :table-props="tableProps"
        :data-api="dataUrl"
        :pagination="false"
        row-key="menuId"
        ref="dataTable"
      >
        <el-table-column label="操作" slot="tool">
          <template slot-scope="scope">
            <el-button
              size="mini"
              v-permission="['menu:save']"
              @click="handleOpenDialog(scope.row.menuId)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.menuId)">删除</el-button>
          </template>
        </el-table-column>
      </ms-table>
      <info :title="title" ref="infoForm" :dialog-visible="dialog1" :form-id="formId" @dataFresh="handleCanleDialog" @close="handleCanleDialog" />
    </div>
  </div>
</template>

<script>
import { deleteMenu } from '@/api/sys/menu'
import { MsTable } from '@/common/table'
import Info from './Info'
import Search from './Search'
import common from '@/mixins/common'
export default {
  components: {
    MsTable,
    Info,
    Search
  },
  mixins: [common],
  data() {
    return {
      tableProps: [
        { index: 'menuName', label: '菜单名称' },
        { index: 'roleMark', label: '权限标识' },
        { index: 'routerName', label: '路由名称' }
      ],
      dataUrl: '/sys/menu/getMenuAll',
      mainTitle: '菜单'
    }
  },
  mounted() {
    this.searchForm.parentId = '0'
  },
  methods: {
    handleDelete(menuId) {
      deleteMenu(menuId).then((res) => { res.obj && this.handleFreshTable() })
    }
  }
}
</script>
